
<template>
    <div class="app-container">
      <div v-show="false" id="report" class="print">
        <div v-for="item in printArr" :key="item.workerId">
          <p style="text-align: center">{{ item.line }}</p>
          <div class="List">
            <div class="left">
              <img :src="item.img" alt="" />
            </div>
            <div class="right">
              <p>{{ item.workerName }}</p>
              <p>{{ item.workerId }}</p>
            </div>
          </div>
          <div class="page-break"></div>
        </div>
      </div>
  
      <Find @Launchform="Launchform3" :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
      <div class="mt10" style="width: 100%; background-color: white">
        <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
          <h1 class="f16">员工资料</h1>
          <Table  @selectList="selectTableList" :tableHeader="tableHeader" :tableData="tableData" selection class="mt10"  />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '5px' }">
          <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
        </el-card>
      </div>
    </div>
  </template>
  <script lang="ts">
  import { defineComponent } from 'vue'
  import LoginWork from '@/utils/LoginWork'
  import JMessage from '@/utils/JMessage'
  export default defineComponent({
    name: 'EmployeeBarcode'
  })
  </script>
  <script lang="ts" setup>
  import { selectList, selectSomeList } from '@/plugins/mixin'
  import service from '@/utils/request'
  import { ref } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { debounce } from 'lodash'
  import { onMounted, watch } from 'vue'
  import qrcode from 'qrcode'
  import {editEmployee, getEmployeeList,addEmployee,deleteEmployee } from '@/api/exploitation/EmployeeBarcode'

  // 修改员工
  const editEmployeeParms = ref([])

  const editEmployeeParmsMethods = async () => {
    if(!Array.isArray(newArray.value)){
        newArray.value = editEmployeeParms.value.map((item: any) => ({
            ...item,
            line: newArray.value,
        }))
    }
    const res = await editEmployee(newArray.value)
    if(res.code === 200){
      getEmployeeListMethods()
      ElMessage.success(res.msg) 
    } else{
        ElMessage.error(res.msg) 
    }
  }

  const printArr = ref([]) as any

  // 打勾删除
  const deleteEmployeeParms = ref()

  const deleteEmployeeMethods = async () => {
    const res = await deleteEmployee(deleteEmployeeParms.value)
    if(res.code === 200){
      getEmployeeListMethods()
      deleteEmployeeParms.value = undefined
      ElMessage.success(res.msg)
    }else{
      ElMessage.error(res.msg)
    }
  }

  const selectTableList = (selectedList: any) => {
    editEmployeeParms.value = selectedList
    deleteEmployeeParms.value = selectedList.map((item: any) => item.workerId)

    printArr.value = selectedList.map((item: any) => {
    let qrCodeData = item.workerId
    qrcode.toDataURL(qrCodeData, (err: any, url: any) => {
      if (err) {
        JMessage.error(err)
      } else {
        qrCodeData = url
      }
    })
    return {
      img: qrCodeData,
      line: item.line,
      workerName: item.workerName,
      workerId: item.workerId
    }
  })
}

 const handleCloseMateriaLKlc14 = () => {
  ElMessageBox.confirm('确认要删除吗?')
    .then(async () => {
        deleteEmployeeMethods()
    })
    .catch(() => {})
}

  // 新增员工
  const newArray = ref<any>()
  const Launchform3 = (row:any) => {
    addEmployeeParms.value.line = row[0].selectValue
    addEmployeeParms.value.workerName = row[1].inputValue
    if(editEmployeeParms.value.length !== 0){
        newArray.value = editEmployeeParms.value.map((item: any) => ({
        ...item,
        line: row[5].selectValue,
        }));
    }else{
        newArray.value = row[5].selectValue
    }
   
  }

  const addEmployeeParms = ref({
    companyId: "",
    line: "",
    remark: "",
    workerId: "",
    workerName:"" 
  })
  const addEmployeeMethods = async () => {
    const res = await addEmployee(addEmployeeParms.value)
    if(res.code === 200){
      ElMessage.success(res.msg)
      getEmployeeListMethods()
    }else{
      ElMessage.error(res.msg)
    }
    console.log(res) 
  }

  const findClicked = (row:any) => {
    if(row === '调整组别'){
        if(editEmployeeParms.value.length === 0){
            ElMessage.warning("请选择要调整的员工")
            return 
        }
        editEmployeeParmsMethods() 
    }
    if(row === '删除打勾员工'){
      if(deleteEmployeeParms.value === undefined){
        ElMessage.warning("请选择要删除的员工")
        return
      }else{
        handleCloseMateriaLKlc14()
        }
    }
    if (row === '新增') {
        if(addEmployeeParms.value.line === "" || addEmployeeParms.value.workerName === ""){
            ElMessage.warning("组别和姓名不可为空")
            return
        }
        addEmployeeMethods()
    }

    if (row === '打印条码') {
        const printHTML = (document.querySelector('#report') as any).innerHTML
    window.document.body.innerHTML = printHTML
    window.print() // 调用浏览器的打印功能打印指定区域
    window.location.reload() // 打印完成后重新加载页面 
    }
  }

  const tableHeader = ref([
  {
    label: '针车组别',
    prop: 'line'
  },
  {
    label: '工号',
    prop: 'workerId'
  },
  {
    backgroundColor: true,
    label: '姓名',
    prop: 'workerName'
  }
])

  const formList = ref<any>([
  {
    type: 'select',
    selectValue: '',
    selectP: '针车组别',
    selectLabel: '',
    selectOptions: [
        { optionKey: "裁断",
      optionValue: "裁断",
      optionLabel: "裁断"}
        ]
  },
  {
    type: 'input',
    inputPlaceholder: '请输入姓名',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '新增'
  },
  {
    type: 'button',
    checkboxLabel: '打印条码'
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '针车组别 ',
    selectLabel: '',
    selectOptions: [
        { optionKey: "裁断",
      optionValue: "裁断",
      optionLabel: "裁断"}
        ]
  },
  {
    type: 'button',
    checkboxLabel: '调整组别'
  },
  {
    type: 'button',
    checkboxLabel: '删除打勾员工'
  }
])

  // 员工信息
  const tableData = ref<any>([])
  const getEmployeeListParms = ref({
    companyId: "",
    line: "",
    remark: "",
    workerId: 0,
    workerName: "",
    pageNum: 1,
    pageSize: 40
  })

  const getEmployeeListMethods = async () => {
    const res = await getEmployeeList(getEmployeeListParms.value)
    console.log(res)
    if (res.code === 200) {
      tableData.value = res.rows
      total.value = res.total
    } else {
      ElMessage.error(res.msg)
    }
  }
  const total = ref(0)
const handleSizeChange = (val: number) => {
  getEmployeeListParms.value.pageSize = val
  getEmployeeListMethods()
}
const handleCurrentChange = (val: number) => {
  getEmployeeListParms.value.pageNum = val
  getEmployeeListMethods()
}

   const addEmployeeParms1 = ref()

  onMounted(() => {
    getEmployeeListMethods()

    addEmployeeParms1.value = sessionStorage.getItem('company') as any
  })
  </script>
  
  <style lang="less" scoped></style>
  <style media="print">
  .List {
    font-size: 16px;
    margin-top: 6mm;
    display: flex;
    justify-content: space-evenly;
  }
  
  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
  }
  
  img {
    width: 100px;
    height: 100px;
  }
  </style>
  <style type="text/css" media="print">
  @media print {
    html,
    body {
      margin: 0;
      padding: 0;
      width: 60mm;
      height: 39mm;
    }
  
    @page {
      margin: 1mm;
      size: landscape;
    }
  }
  </style>
  